<template>
  <div class="rule-page">
    <!-- <h1>平台规则</h1> -->
    <div class="rule-content">
      <template v-if="rules.length > 0">
        <div 
          v-for="(rule, index) in rules" 
          :key="index" 
          class="rule-item"
          @click="handleRuleClick(rule)"
        >
          <div class="rule-title">
            <div class="rule-title-left">
              <img src="@/assets/images/user/icn01.png" alt="" srcset="">
              <p>{{ rule.title }}</p>
            </div>
            
            <van-icon name="arrow" />
          </div>
        </div>
      </template>
      <NoData v-else :text="t('nodata01')" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入所需的依赖
// 导入所需的依赖
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getNewslist } from "@/api"; // 导入新闻列表API
import { showToast } from "vant"; // 导入提示组件
import NoData from '@/components/NoData.vue'
const router = useRouter()
const { t } = useI18n();

// 规则列表数据
// 规则列表数据
const rules = ref([]);

// 分页参数
const page = ref(1);
const pageSize = 10;
const loading = ref(false);

// 生命周期钩子
onMounted(() => {
  // 获取规则内容
  getRuleContent()
})

// 方法定义
function getRuleContent() {
  loading.value = true;
  // 调用getNewslist接口获取规则内容，type设为rule
  getNewslist({ page: page.value, pageSize, type: "rule" })
    .then((res) => {
      if (res.code === 200 && res.data) {
        // 将接口返回的数据转换为规则列表格式
        const ruleData = res.data.map((item: any) => ({
          id: item.id,
          title: item.title,
          path: `/newsdetail?item=${encodeURIComponent(JSON.stringify(item))}`,
        }));

        // 如果有数据，更新rules列表
        if (ruleData.length > 0) {
          rules.value = ruleData;
        }
      } else {
        showToast(res.msg || t('rule_getFail'));
      }
    })
    .catch((error) => {
      console.error("err", error);
      showToast(t('products_networkError'));
    })
    .finally(() => {
      loading.value = false;
    });
}

// 点击规则项
const handleRuleClick = (rule: any) => {
  router.push(rule.path)
}
</script>

<style lang="less" scoped>
.rule-page {
  min-height: 100vh;
  background: url('@/assets/images/user/topBg.png') no-repeat center center;
  background-size: 100% 100%;
  padding: 15px;

  .rule-content {
    .rule-item {
      background:linear-gradient(90deg, rgb(205 198 195 / 50%) 0%, rgba(43, 32, 28, 0.3) 100%);
      border-radius: 8px;
      margin-bottom: 12px;
      padding:5px 16px;
      cursor: pointer;
      
      &:active {
        opacity: 0.8;
      }

      .rule-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #f6eade;
        font-size: 15px;
        
        :deep(.van-icon) {
          color: #f6eade;
          opacity: 0.8;
        }
      }
    }
  }
}
.rule-title-left{
  display: flex;
  align-items: center;
  gap: 5px;
  img{
    width: 20px;
    height: 20px;
  }
  p{
    font-size: 15px;
    color: #f6eade;
  }
}
</style>
